<template>
<div id="app">
  <transition name="van-fade">
    <router-view name="headerbar" class="header"></router-view>
  </transition>
  <transition name="van-fade">
    <router-view name="toolbar" class="fixTop"></router-view>
  </transition>
  <transition :name="transitionName">
    <router-view class="slideview"></router-view>
  </transition>
  <transition name="van-fade">
    <router-view name="footbar" ></router-view>
  </transition>
</div>
</template>
<script>
export default {
  name: 'app',
  data() {
    return {
      transitionName: 'slide-left'
      // index: 2
    }
  },
  components: {
  },
  watch: {
    $route(to, from) {
      const isBack = this.$router.isBack //  监听路由变化时的状态为前进还是后退
      if (isBack) {
        this.transitionName = 'slide-right'
      } else {
        this.transitionName = 'slide-left'
      }
      this.$router.isBack = false
    }
  },
  computed: {
    titel() {
      return this.$route.meta.headerTitel
    }
  },
  mounted: function() {

  },
  methods: {
    tabChange: function(tab) {
      this.tabView = tab
    },
    tab_to(index) {
      demo4 = item,
      console.log(index)
    },
    loh(index) {
      console.log(index)
    }
  }
}
</script>
<style lang="less">
@import '~vux/src/styles/reset.less';
.header{
  width: 100%;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 50;
}
.fixTop{
  width: 100%;
  position: fixed;
  top: 46px;
  left: 0px;
  z-index: 50;
}
.header-icon{
  font-size:24px
}
.tabbar{
  width: 100%;
  position: fixed;
  bottom: 0px;
  left: 0px;
  z-index: 50;
}
.slideview {
  position: absolute;
  width: 100%;
  transition: all 0.1s ease-in-out;
}

.slide-left-enter,
.slide-right-leave-active {
  opacity: 0;
  -webkit-transform: translate(50px, 0);
  transform: translate(50px, 0);
}

.slide-left-leave-active,
.slide-right-enter {
  opacity: 0;
  -webkit-transform: translate(-50px, 0);
  transform: translate(-50px, 0);
}
</style>
